<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>亚马逊注册表和礼品赠送</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #top1 {
            background-color: #0c131b;
            height: 50px;
            line-height: 10px;
        }

        #tu1,
        #tu2,
        #tu3 {
            height: 50px;
            position: relative;
        }

        #tu1 {
            left: 20px;
        }

        #tu2 {
            left: 330px;
        }

        #tu3 {
            left: 200px;
        }

        #top2 {
            height: 39px;
            background-color: #283851;
        }

        #top2 a {
            position: relative;
            display: inline-block;
            line-height: 1em;
            color: white;
            text-decoration: none;
            padding-left: 10px;
            padding-right: 10px;
        }

        #top2 a:hover {
            color: steelblue;
        }

        #left1 {
            position: relative;
            left: 775px;
        }

        #top3 {
            height: 64px;
            line-height: 64px;
        }

        #top3 h4 {
            color: steelblue;
            padding-left: 55px;
            display: inline-block;
        }

        .x1 {
            padding-left: 30px;
            display: inline-block;
        }

        #top4 {
            height: 279px;
            background-image: url(./img/图片5.jpg);
            background-size: 100%;
            background-attachment: inherit;
        }

        #top4 h2 {
            padding-top: 60px;
        }

        #top4 img {
            padding-top: 30px;
            width: 165px;
            height: 40px;
        }

        .x2 {
            padding-left: 70px;
        }

        #top5 {
            height: 164px;
            background-color: #f4f2f3;
            text-align: center;
        }

        #top5 h3 {
            padding-top: 20px;
        }

        #top6 {
            text-align: center;
        }

        #top6 h3 {
            padding: 20px;
        }

        #top6 div {
            display: inline-block;
            width: 220px;
            height: 173px;
        }

        .nei1 {
            width: 72px;
            height: 72px;
        }

        #top7 {
            text-align: center;
        }

        #top7 div {
            display: inline-block;
            margin-left: 24px;
            width: 168px;
            height: 228px;
            line-height: 35px;
            border: solid 1px #283851;
        }

        #top7 img {
            width: 168px;
            height: 168px;
        }

        #top8 {
            margin-top: 20px;
            height: 49px;
            background-color: #283851;
            text-align: center;
            line-height: 49px;
        }

        #top8 a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="top1">
        <img id="tu1" src="./img/图片1.jpg">
        <img id="tu3" src="./img/图片3.jpg">
        <img id="tu2" src="./img/图片2.jpg">
    </div>
    <div id="top2">
        <img id="tu4" src="./img/图片4.jpg">
        <a href="#">全部</a>
        <a href="#">今日特价</a>
        <a href="#">客户服务</a>
        <a href="#">礼品心愿单</a>
        <a href="#">礼品卡</a>
        <a href="#">全球开店</a>
        <a href="#" id="left1"><strong>立即选购超值优惠商品</strong></a>
    </div>
    <div id="top3">
        <h4>礼品心愿单与礼品赠送</h4>
        <h5 class="x1">查找礼品心愿单或礼品清单</h5>
        <h5 class="x1">创建礼品心愿单或礼品清单</h5>
        <h5 class="x1">帮助</h5>
    </div>
    <div id="top4">
        <h2 class="x2"><strong>馈赠佳礼</strong></h2>
        <p class="x2">无论您是在庆祝婚礼、孩子出生、生日还是其他难忘的重大事<br>件，我们的礼品清单和礼品心愿单都将帮助您和您的客人查找完<br>美的礼物。</p>
        <img class="x2" src="./img/图片6.jpg">
    </div>
    <div id="top5">
        <h3>查找礼品心愿单或礼品清单</h3>
        <img src="./img/图片7.jpg">
    </div>
    <div id="top6">
        <h3>在亚马逊上创建礼品心愿单或礼品清单的理由</h3>
        <div>
            <img src="./img/1.svg" class="nei1">
            <h4>庆祝任何特殊时刻</h4>
            <p>添加来自亚马逊的商品，以创建适合任何场合的礼品注册。</p>
        </div>
        <div>
            <img src="./img/2.svg" class="nei1">
            <h4>轻松分享</h4>
            <p>与朋友和家人分享你的礼物清单，这样他们就会确切知道要得到什么礼物。</p>
        </div>
        <div>
            <img src="./img/3.svg" class="nei1">
            <h4>延期退货</h4>
            <p>礼品不太合适？ 礼品注册处购买的退货期限延长。</p>
        </div>
        <div>
            <img src="./img/4.svg" class="nei1">
            <h4>感谢名单</h4>
            <p>我们会跟踪何人在何时购买了何样礼品，以方便您发送致谢短笺。</p>
        </div>
        <h3>了解我们不同礼品心愿单和礼品清单的更多信息</h3>
    </div>
    <div id="top7">
        <div>
            <img src="./img/1.jpg" class="nei2">
            <p>我要结婚了</p>
        </div>
        <div>
            <img src="./img/2.jpg" class="nei2">
            <p>我正等着迎接宝宝</p>
        </div>
        <div>
            <img src="./img/3.jpg" class="nei2">
            <p>庆祝儿童生日</p>
        </div>
        <div>
            <img src="./img/4.jpg" class="nei2">
            <p>为冬季节日做准备</p>
        </div>
        <div>
            <img src="./img/5.jpg" class="nei2">
            <p>庆祝不同的类型或场合</p>
        </div>
    </div>
    <div id="top8">
        <a href="#">回到顶部</a>
    </div>
    <div id="top9">
        <img src="./img/底1.png" width="1477px">
    </div>

</body>

</html>